<style lang="scss" scoped>
</style>

<template>
  <el-dialog v-model="visible" title="商品详情" @close="handleClose" style="width: 1200px;">
    <div class="modal_content">
      <el-table style="height: 100%;" v-loading="loading" v-on="tableEvent" v-bind="propsRes.table">
        <el-table-column align="center" show-overflow-tooltip prop="shippingOrderNumber" min-width="200px" label="出通单号"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="goodsCode" min-width="180px" label="商品编码"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="goodsModel" min-width="180px" label="规格型号"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="goodsName" min-width="200px" label="商品名称"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="amout" min-width="180px" label="出货数量"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="unit" min-width="150px" label="单位"></el-table-column>
      </el-table>
      <div class="public_pagination">
        <el-pagination v-bind="propsRes.pagination" v-on="paginationEvent" />
      </div>
    </div>
    <template #footer>
      <div class="modal-btn-list">
        <div>
          <el-button type="primary" @click="handleClose">关闭</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import useTableProps from "@/hooks/tableList.js";
import { postShippingDetail } from "@/api/outOrder.js"


const visible = ref(false);
// 控制是否禁用
const searchParams = reactive({
  shippingOrderNumber: '',
})

const { loading, propsRes, tableEvent, paginationEvent, tableRef, searchTableList, getTableList } = useTableProps({
  searchParams,
  url: postShippingDetail
})

onMounted(()=>{
})

// 打开
const getParent = (type) => {
  // console.log(type);
  searchParams.shippingOrderNumber = type;
  getTableList()
  visible.value = true;
};
// 关闭
const handleClose = () => {
  visible.value = false;
  // location.reload();
};


defineExpose({
  getParent,
});
</script>
